<template>
  <a-modal
    @cancel="cancel"
    centered
    v-model="visible"
    title="编辑接收"
    width="75%"
  >
    <template slot="footer">
      <a-button
        @click="cancel"
        style="background: #d7d7d7; color: #fff; border: none"
        >取消</a-button
      >
      <a-button :loading="loading" type="primary" @click="handleOk"
        >保存</a-button
      >
    </template>
    <div style="margin-bottom: 10px">
      <span> 库位选择： </span>
      <a-radio-group v-model="isAll">
        <a-radio :value="false"> 对SKU选择库位 </a-radio>
        <a-radio :value="true"> 对装箱选择库位 </a-radio>
      </a-radio-group>
    </div>
    <!-- 表格 -->
    <a-table
      size="small"
      bordered
      :data-source="dataSource"
      :pagination="false"
    >
      <!-- 箱子编号 -->
      <a-table-column key="boxNo" data-index="boxNo" align="center" width="8%">
        <span slot="title"> 箱子编号</span>
        <template slot-scope="text, record">
          {{ record.boxNo }}
        </template>
      </a-table-column>
      <!-- sku信息 -->
      <a-table-column
        key="boxlist"
        class="columns-tab"
        data-index="boxlist"
        align="center"
        :width="isAll ? '50%' : '62%'"
      >
        <div slot="title" class="columns">
          <div :style="!isAll ? 'width: 16%' : 'width:21%'">商品名称</div>
          <div :style="!isAll ? 'width: 16%' : 'width:21%'">商品SKU</div>
          <div :style="!isAll ? 'width: 13%' : 'width:19%'">标签</div>
          <div :style="!isAll ? 'width: 14%' : 'width:17%'">预报数量/箱</div>
          <div :style="!isAll ? 'width: 18%' : 'width:20%'">接收SKU数量/箱</div>
          <div style="width: 23%" v-if="!isAll">库位选择</div>
        </div>
        <template slot-scope="text, record">
          <ul class="pto-list" v-for="item in record.pto" :key="item.key">
            <li :style="!isAll ? 'width: 16%' : 'width:21%'">
              <span>
                {{ item.skuName }}
              </span>
            </li>
            <li :style="!isAll ? 'width: 16%' : 'width:21%'">
              <span>
                {{ item.sku }}
              </span>
            </li>
            <li :style="!isAll ? 'width: 13%' : 'width:19%'">
              <span>
                {{ item.productTag }}
              </span>
            </li>
            <li :style="!isAll ? 'width: 14%' : 'width:17%'">
              <span>
                {{ item.singleBoxNumber }}
              </span>
            </li>
            <li :style="!isAll ? 'width: 18%' : 'width:20%'">
              <a-input-number
                size="small"
                :min="0"
                style="width: 80%"
                v-model="item.newSingleBoxNumber"
              />
            </li>
            <li style="width: 23%" v-if="!isAll">
              <a-cascader
                style="width: 80%"
                size="small"
                :showSearch="true"
                :options="storageLocation"
                @change="
                  (value, selectedOptions) =>
                    onChangeLocation(value, selectedOptions, item, 'item')
                "
                placeholder="请选择库位"
                v-model="item.locationId"
              />
            </li>
          </ul>
        </template>
      </a-table-column>
      <!-- 库位选择 -->
      <a-table-column
        v-if="isAll"
        key="warehouse"
        data-index="warehouse"
        align="center"
        width="12%"
      >
        <span slot="title">库位选择</span>
        <template slot-scope="text, record">
          <a-cascader
            size="small"
            :showSearch="true"
            :options="storageLocation"
            @change="
              (value, selectedOptions) =>
                onChangeLocation(value, selectedOptions, record, 'all')
            "
            placeholder="请选择库位"
            v-model="record.allWarehouseId"
          />
        </template>
      </a-table-column>
      <!-- 预报箱数 -->
      <a-table-column
        key="packingNumber"
        data-index="packingNumber"
        align="center"
        width="10%"
      >
        <span slot="title">预报箱数</span>
        <template slot-scope="text, record">
          {{ record.packingNumber }}
        </template>
      </a-table-column>
      <!-- 本次接收箱数 -->
      <a-table-column
        key="currentPackingNumber"
        data-index="currentPackingNumber"
        align="center"
        width="10%"
      >
        <span slot="title">本次接收箱数</span>
        <template slot-scope="text, record">
          <a-input-number
            size="small"
            :min="1"
            style="width: 80%"
            v-model="record.currentPackingNumber"
          />
        </template>
      </a-table-column>
      <!-- 操作 -->
      <a-table-column
        key="action"
        data-index="action"
        align="center"
        width="10%"
      >
        <span slot="title">操作</span>
        <template slot-scope="text, record">
          <a
            href="javascript:;"
            style="color: #3e3ee3; border-bottom: 1px solid #3e3ee3"
            @click="addReceive(record)"
            >新增</a
          >
          <a-divider type="vertical" />
          <a
            href="javascript:;"
            style="color: red; border-bottom: 1px solid red"
            @click="removeReceive(record)"
            >移除</a
          >
        </template>
      </a-table-column>
    </a-table>
  </a-modal>
</template>

<script>
import { warehouse_select } from "@/apis/common.js";
import { save_receive } from "@/apis/system/InOrder/OneInStorages";
export default {
  props: ["getSingleInfo"],
  created() {},

  data() {
    return {
      isAll: false,
      loading: false,
      visible: false,
      dataSource: [],
      //库位数据
      storageLocation: [],
      parentData: {},
    };
  },
  mounted() {
    //编辑、详情
    this.$bus.$off("showModal");
    this.$bus.$on("showModal", async (record) => {
      this.parentData = record;
      let obj = JSON.parse(JSON.stringify(record));
      this.dataSource.push(obj);
      this.dataSource.forEach((item) => {
        this.$set(item, "allWarehouseId", []); //按箱来选择库位
        if (item.pto.length > 0) {
          item.pto.forEach((val) => {
            if (val.locationId && val.locationId != "") {
              val.locationId = val.locationId.split(",");
            } else {
              val.locationId = [];
            }
          });
        }
      });
      this.getStorageLocation(obj.pto[0].warehousingId); //获取库位
    });
  },
  methods: {
    //新增接收箱子
    addReceive(record) {
      let newObj = JSON.parse(JSON.stringify(record));
      newObj.key = Math.random();
      newObj.currentPackingNumber = 1;
      newObj.allWarehouseId = [];
      newObj.pto.forEach((item) => {
        item.newSingleBoxNumber = 0;
        item.locationId = [];
        item.locationName = "";
      });
      this.dataSource.push(newObj);
    },
    //删除接收箱子
    removeReceive(record) {
      if (this.dataSource.length == 1) {
        this.$message.error("最少有一个接收箱子！");
        return;
      }
      this.dataSource.forEach((item, index) => {
        if (record.key == item.key) {
          this.dataSource.splice(index, 1);
        }
      });
    },
    //关闭模态框
    cancel() {
      this.visible = false;
      setTimeout(() => {
        this.loading = false;
        this.dataSource = [];
      }, 50);
    },
    //提交
    async handleOk() {
      //定一个验证库位选择的标杆
      let wareFlag = true;
      this.loading = true;
      let subMitObj = JSON.parse(JSON.stringify(this.dataSource));
      subMitObj.forEach((item) => {
        item.pto.forEach((val) => {
          if (val.newSingleBoxNumber && val.newSingleBoxNumber != 0) {
            if (val.locationId && val.locationId.length == 0) {
              wareFlag = false;
            }
          }
        });
      });
      //如果输了数量就必须选库位
      if (!wareFlag) {
        this.loading = false;
        this.$message.error("填了接收sku箱数的数据库位必须选择！");
        return false;
      }
      subMitObj.forEach((item) => {
        if (!this.isAll) {
          item.storageType = "1";
        } else {
          item.storageType = "2";
        }
        item.originalId = item.id;
        console.log(item.pto);
        item.pto = item.pto.filter((val) => {
          return val.newSingleBoxNumber && val.newSingleBoxNumber > 0;
        });
        item.pto.forEach((val) => {
          //直接tostring
          if (
            val.locationId &&
            val.locationId instanceof Array &&
            val.locationId.length == 1
          ) {
            val.locationId = val.locationId.toString();
          }
          //选择了二级库位以上需要join
          if (
            val.locationId &&
            val.locationId instanceof Array &&
            val.locationId.length > 1
          ) {
            val.locationId = val.locationId.join(",");
          }
        });
        //赋值一个后端要的数据
        item.bpprs = item.pto;
      });

      //定一个验证sku接收箱数是否为0的标杆
      let numFlag = true;
      console.log(subMitObj);
      subMitObj.forEach((item) => {
        if (item.bpprs.length <= 0) {
          numFlag = false;
        }
      });
      if (numFlag) {
        let res = await save_receive(subMitObj);
        if (res.code == "10000") {
          this.getSingleInfo(this.parentData.whApplyId, "look");
          this.cancel();
        }
      } else {
        this.loading = false;
        this.$message.error("一个接收箱子里接收sku数量/箱不能全部为0！");
      }
    },
    //仓库库位选择
    onChangeLocation(value, options, row, flag) {
      if (flag === "item") {
        if (options && options.length > 0) {
          row.locationId = value;
          row.locationName = options[options.length - 1].label;
        }
      } else {
        if (options && options.length > 0) {
          row.pto.forEach((item) => {
            item.locationId = value;
            item.locationName = options[options.length - 1].label;
          });
        } else {
          row.pto.forEach((item) => {
            item.locationId = value;
            item.locationName = "";
          });
        }
      }
    },
    //获取仓库库位
    async getStorageLocation(id) {
      let { code, responseBody } = await warehouse_select({
        warehousePid: id,
        isTree: true,
      });
      if (code === "200") {
        this.storageLocation = this.getSkuTypeThree(responseBody);
        this.visible = true;
      }
    },
    //封装组装后台数据
    getSkuTypeThree(data) {
      data.forEach((item) => {
        item.label = item.titleName;
        item.children = item.child;
        item.value = item.warehouseId;
        item.sort = this.sort;
        if (item.children && item.children.length >= 1) {
          this.sort += 1;
          this.getSkuTypeThree(item.children);
        }
      });
      this.sort = 0;
      return data;
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.columns-tab {
  width: 10% !important;
  .columns {
    display: flex;
    div {
      // width: 100px;
      text-align: center;
      border: 1px solid #e8e8e8;
    }
    div:nth-child(2) {
      border-right: 0;
      border-left: 0;
    }
    div:nth-child(4) {
      border-right: 0;
      border-left: 0;
    }
  }
}

.pto-list {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  li {
    border: 1px solid #e8e8e8;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px 0;
  }
  li:nth-child(2) {
    border-right: 0;
    border-left: 0;
  }
  li:nth-child(4) {
    border-right: 0;
    border-left: 0;
  }
  .nuclide {
    span {
      padding: 3px 5px;
      width: 100%;
      background-color: #129556;
      color: #fff;
      border-radius: 5px;
    }
  }
  .nonuclide {
    span {
      padding: 3px 5px;
      width: 100%;
      background-color: #d9001b;
      color: #fff;
      border-radius: 5px;
    }
  }
}
</style>
